<template>
    <div>
        <h1>门店列表</h1>
        <input type="button" value="新增门店" @click="add()">
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>门店名称</td>
                    <td>门店电话</td>
                    <td>门店地址</td>
                    <td>门店图片</td>
                    <td>门店的状态</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in data.list" :key="item.id">
                    <td>{{item.Name}}</td>
                    <td>{{item.Phone}}</td>
                    <td>{{item.Address}}</td>
                    <td><img :src="queryInfo.Photo"></td>
                    <td>{{item.State}}</td>
                    <td>
                        <input type="button" value="修改" @click="upd(item.Id)">
                        <input type="button" value="删除" @click="del(item.Id)">
                    </td>
                </tr>
            </tbody>
        </table>
        <div>
            <span>当前页：{{data.pageIndex}}</span>
            <span>总页数：{{data.totalPage}}</span>
            <span>总条数：{{data.totalCount}}</span>
            <input type="button" value="首页" @click="gopage('a')">
            <input type="button" value="上一页" @click="gopage('b')">
            <input type="button" value="下一页" @click="gopage('c')">
            <input type="button" value="尾页" @click="gopage('d')">
        </div>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { reactive, ref,onMounted } from 'vue';
import { useRouter } from 'vue-router'

onMounted(() => {
    getdata();
})

//创建一个路由器，实现页面跳转并传参
const router = useRouter();

//跳转到门店增加
const add = () => {
    router.push('/shopadd');
}

let data:any = reactive({
    list: [],
    totalCount:0,
    totalPage:0,
})

let queryInfo = reactive({
    name:'',
    pageIndex:1,
    pageSize:2
})

const getdata = () => {
    axios({
        url:'/api/Shop/GetShops',
        method:'get',
        params:queryInfo
    })
    .then((res) => {
        console.log(res);
        data.list = res.data.list;
        data.totalCount = res.data.totalCount;
        data.totalPage = res.data.totalPage;
    })
    .catch((err) => {
        console.log(err);
    })
}

const gopage = (str:string) => {
    switch(str){
        case 'a':
            if(queryInfo.pageIndex == 1)
            {
                alert('到首页了');
                return;
            }
            break;
        case 'b':
            if(queryInfo.pageIndex == 1)
            {
                alert('已经是第一页了');
                return;
            }
            queryInfo.pageIndex--;
            break;
        case 'c':
            if(queryInfo.pageIndex == data.totalPage)
            {
                alert('已经是最后一页了');
                return;
            }
            queryInfo.pageIndex++;
            break;
        case 'd':
            if(queryInfo.pageIndex == data.totalPage)
            {
                alert('到最后一页了');
                return;
            }
            break;
    }
    getdata();
}

const del = (id:any) => {
    var f = confirm('确定要删除吗？');
    if(f==true)
    {
        axios({
            url:'/api/Shop/DelShop',
            method:'delete',
            params:{
                id:id
            }
        })
    }
}

const upd = (id:any) => {
    router.push({
        path:'/shopupd',
        query:{
            id:id
        }
    })
}

</script>

<style scoped>

</style>